<template>
    <Tabs>
        <Tab-pane label="文章类型" name="type">
            <Table :columns="typeColumns" :data="types"></Table>
            <Row style="margin-top:30px;">
                <Col span="10">
                <Input placeholder="文章类型" v-model="newType"></Input>
                </Col>
                <Col span="2" offset="1">
                <Button type="success" @click="addTagAndType('type')">添加</Button>
                </Col>
            </Row>
        </Tab-pane>
        <Tab-pane label="标签" name="tag">
            <Table :columns="tagColumns" :data="tags"></Table>
            <Row style="margin-top:30px;">
                <Col span="8">
                <Input placeholder="标签类型" v-model="newTag"></Input>
                </Col>
                <Col span="8" offset="1">
                    <Select v-model="tagColor" placeholder="请选择标签颜色">
                        <!--<Option v-for="color in colors" :value="color.value" :key="color"> {{color.title}} </Option>-->
                        <Option value="blue">blue</Option>
                        <Option value="yellow">yellow</Option>
                        <Option value="green">green</Option>
                        <Option value="red">red</Option>
                    </Select>
                </Col>
                <Col span="2" offset="1">
                <Button type="success" @click="addTagAndType('tag')">添加</Button>
                </Col>
            </Row>
        </Tab-pane>
    </Tabs>
</template>
<script>
import API from '../api'
import URL from '../urls'
import NewArticle from './NewArticle'
export default {
    data() {
        return {
            colors: [{
                title: 'red',
                value:'red'
            }, {
                title: 'blue',
                value:'blue'
            }, {
                title: 'yellow',
                value:'yellow'
            }, {
                title: 'green',
                value:'green'
            }],
            typeColumns: [
                {
                    title: 'id',
                    key: 'fidno'
                },
                {
                    title: '类型',
                    key: 'fname'
                },
                {
                    title: "操作",
                    key: 'action',
                    render: (h, params) => {
                        return h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: () => {
                                    this.remove(params.row.fidno, 'type')
                                }
                            }
                        }, '删除')
                    }
                }
            ],
            types: [],
            newType: '',
            tagColumns: [
                {
                    title: 'id',
                    key: 'id'
                },
                {
                    title: '名称',
                    key: 'cname'
                },
                {
                    title: '操作',
                    key: 'action',
                    render: (h, params) => {
                        return h('Button', {
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on: {
                                click: () => {
                                    this.remove(params.row.id, 'tag')
                                }
                            }
                        }, '删除标签')
                    }
                }
            ],
            tags: [],
            newTag: '',
            tagColor:''
        }
    },
    methods: {
        getTypes() {
            API.request(URL.GETTYPES, {}, (res) => {
                if (res) {
                    this.types = res.Table2
                } else return
            })
        },
        getTags() {
            API.request(URL.GETTAGS, {}, (res) => {
                if (res) {
                    this.tags = res.Table2
                } else return
            })
        },
        remove(index, type) {

        },
        addTagAndType(type) {
            if (type === 'type') {
                var params = {
                    data: {
                        typename: this.newType
                    }
                }
                API.request(URL.ADDTYPE, params, (res) => {
                    if (res) {
                        this.getTypes()
                        this.$Notice.open({
                            title: '通知',
                            desc: '添加成功',
                            duration: 1
                        });
                        this.newType = ''
                    }
                })
            } else {
                var params = {
                    data: {
                        cname: this.newTag.name,
                        color: this.newTag.color
                    }
                }
                API.request(URL.ADDTAG, params, (res) => {
                    if (res) {
                        this.getTags()
                        this.$Notice.open({
                            title: '通知',
                            desc: '添加成功',
                            duration: 1
                        });
                        this.newTag = ''
                        this.tagColor = ''
                    }
                })
            }
        }
    },
    created() {
        this.getTypes()
        this.getTags()
    }
}
</script>

